<template>
  <div class="survey">
     
    <div class="article_div">
     <!-- 总概况 -->
    <div class="v_survey">
     	<p class="v_surveytop">今日关键指标</p>
     	<div class="v_surveybox clearfix">
     	   <div><p>收入(元)</p><p>{{totaldata.amount}}</p></div>
     	   <div><p>文章收入(元)</p><p>{{totaldata.articleAmount}}</p></div>
     	   <div><p>推广收入(元)</p><p>{{totaldata.channelAmount}}</p></div>
     	   <div><p>阅读数</p><p>{{totaldata.totalPv}}</p></div>
     	   <div><p>阅读用户</p><p>{{totaldata.totalUv}}</p></div>
     	</div>
     </div>
     <!-- 图表块 -->
     <div class="v_myChart">
        <div class="v_myCharttop clearfix">
        	 <div class="v_myCharttopl">关键指标趋势图</div>
        	  <div class="v_myCharttopr">
        	  
                      <el-select v-model="status" placeholder="收入" size="mini" @change='getIndexbrokenLine'>
                       <el-option label="收入" value="amount"></el-option>
                       <el-option label="文章收入" value="articleAmount"></el-option>
                       <el-option label="推广收入" value="channelAmount"></el-option>
                       <el-option label="阅读数" value="pv"></el-option>
                       <el-option label="阅读用户" value="uv"></el-option>
                     </el-select>
                     
                      <div class="p_surface_title_r">
                            <div class="p_surface_title_r_div">
                                <p class="p_surface_title_r_div_text" @click="timebox">{{timetext}}</p>
                                 <div class="p_surface_title_r_div_fixed" v-if="timeshow==true">
                                      <p for="">选择日期</p>  
                                         <el-date-picker 
                                             @input="times" 
                                             class="time_200"  
                                             v-model="startTime"  
                                             align="right"  
                                             type="date"  
                                             placeholder="选择日期"  
                                             ref="picker1"  
                                             @change="startTimeT"
                                             :picker-options="pickerOptions0">  
                                           </el-date-picker>  
                                           <label for="">至</label>  
                                           <el-date-picker  
                                            @input="times" 
                                            @change="endTimeT"
                                            class="time_200"  
                                            v-model="endTime"  
                                            type="date"  
                                            placeholder="选择日期"  
                                            ref="picker2"  
                                            :picker-options="pickerOptions1">  
                                          </el-date-picker>  
                                    <p>快捷日期:</p>
                                    <ul class="clearfix">
                                        <li @click="time(1)" :class="timetext=='昨天'?'v_li':''">昨天</li>
                                        <li @click="time(5)" :class="timetext=='最近7天'?'v_li':''">最近7天</li>
                                        <li @click="time(2)" :class="timetext=='上周'?'v_li':''">上周</li>
                                        <li @click="time(6)" :class="timetext=='最近15天'?'v_li':''">最近15天</li>
                                        <li @click="time(3)" :class="timetext=='本月'?'v_li':''">本月</li>
                                        <li @click="time(7)" :class="timetext=='最近30天'?'v_li':''">最近30天</li>
                                        <li @click="time(4)" :class="timetext=='上月'?'v_li':''">上月</li>
                                    </ul>
                                    <div class="p_surface_title_r_div_operation clearfix">
                                        <div class="p_surface_title_r_div_determine" @click="getIndexbrokenLine()">
                                            确定
                                        </div>
                                        <div class="p_surface_title_r_div_cancel" @click="timeshow=false">
                                            取消
                                        </div>

                                    </div>
                                 </div>
                            </div>
                        </div>


        	  </div>
        </div>
     	<div id="myChart" :style="{width: '100%', height: '400px'}"></div>
     </div>
     

  <!--   	  <div class="top clearfix">
    	     <router-link to="/income"><div class="v_div">收入明细</div></router-link> -->

    	     <!-- <router-link to="/article/submission"><div class="v_div">提现明细</div></router-link> -->
    	  <!-- </div> -->

    	  <!-- 表格 -->
    	  <div class="v_box">
      <div class="income">
    <!--按钮、搜索-->
    <div class="v_table clearfix">
       <p class="v_tablel">关键指标明细</p>
       <div class="opr">
         <div class="p_surface_title_r">
                            <div class="p_surface_title_r_div">
                                <p class="p_surface_title_r_div_text" @click="timeboxlist">{{timetextlist}}</p>
                                 <div class="p_surface_title_r_div_fixed" v-if="timeshowlist==true">
                                      <p for="">选择日期</p>  
                                         <el-date-picker 
                                             @input="timeslist" 
                                              @change="startTimelistT"
                                             class="time_200"  
                                             v-model="startTimelist"  
                                             align="right"  
                                             type="date"  
                                             placeholder="选择日期"  
                                             ref="picker1"  
                                             :picker-options="pickerOptions0">  
                                           </el-date-picker>  
                                           <label for="">至</label>  
                                           <el-date-picker  
                                            @input="timeslist" 
                                            @change="endTimelistT"
                                            class="time_200"  
                                            v-model="endTimelist"  
                                            type="date"  
                                            placeholder="选择日期"  
                                            ref="picker2"  
                                            :picker-options="pickerOptions1">  
                                          </el-date-picker>  
                                    <p>快捷日期:</p>
                                    <ul class="clearfix">
                                        <li @click="timelist(1)" :class="timetextlist=='昨天'?'v_li':''">昨天</li>
                                        <li @click="timelist(5)" :class="timetextlist=='最近7天'?'v_li':''">最近7天</li>
                                        <li @click="timelist(2)" :class="timetextlist=='上周'?'v_li':''">上周</li>
                                        <li @click="timelist(6)" :class="timetextlist=='最近15天'?'v_li':''">最近15天</li>
                                        <li @click="timelist(3)" :class="timetextlist=='本月'?'v_li':''">本月</li>
                                        <li @click="timelist(7)" :class="timetextlist=='最近30天'?'v_li':''">最近30天</li>
                                        <li @click="timelist(4)" :class="timetextlist=='上月'?'v_li':''">上月</li>
                                    </ul>
                                    <div class="p_surface_title_r_div_operation clearfix">
                                        <div class="p_surface_title_r_div_determine" @click="getIndexlist(true)">
                                            确定
                                        </div>
                                        <div class="p_surface_title_r_div_cancel" @click="timeshowlist=false">
                                            取消
                                        </div>

                                    </div>
                                 </div>
                            </div>
                        </div>

        </div>
    </div>
    <!-- 操作区-->
 <!--    <p class="opr flexOpr">
      <span class="count">需求数（{{inde}}）</span>
    </p> -->
    <!--表格-->
    <el-table
            :data="tableData"
            :empty-text="empty"
            style="width: 100%">
      <el-table-column
              label="日期">
        <template slot-scope="scope">
          <p class="price" v-if="scope.row.createTime!=null">{{ scope.row.createTime | stampFormate}}</p>
          <p class="price" v-if="scope.row.createTime==null">-</p>
        </template>
      </el-table-column>
      <el-table-column
              label="收入(元)">
              <template slot-scope="scope">
                  <p>{{ scope.row.amount | money}}</p>
               </template>
      </el-table-column>
      <el-table-column
              label="文章收入">
               <template slot-scope="scope">
                  <p>{{scope.row.articleAmount | money}}</p>
              
               </template>
      </el-table-column>
      <el-table-column
              width = "240"
              label="推广收入">
              <template slot-scope="scope">
          <p class="price">{{ scope.row.channelAmount | money }}</p>
          <!-- <p class="price">{{scope.row.content}}</p> -->
        </template>
      </el-table-column>
      <el-table-column
               prop="totalPv"
              label="阅读数">
      </el-table-column>
      <el-table-column
               prop="totalUv"
              label="阅读用户">
      </el-table-column>
  <!--     <el-table-column
              label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="getArticleDemandid(scope.row)">详情</el-button>
        </template>
      </el-table-column> -->
    
    </el-table>
    <!--分页-->
    <div class="v_paging">
        <el-pagination
            background
           layout="total, sizes, prev, pager, next, jumper"
           :current-page.sync="currentPage"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :total="inde">
    </el-pagination>
   </div>

  </div>
    </div>
    </div>       
  </div>

 
</template>

<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'
   let echarts = require('echarts')

  export default {
    props: [],
    data () {
      return {
        // 操作区
        indexid:'',
        status: 'amount', // 选择需求状态
        query: '', // 查询条件
        dicId: '30', //行业状态
        // 列表
        tableData: [], //列表数据
        empty:'加载中...',
        // 分页
        currentPage:1,
        inde:1,
        pages:{
           no:1,
           size:10,
        },
        totaldata:'',//总额

       startTime:'',         //时间
       endTime:'',           //时间
       timeshow:false,          //是否隐藏
       timeshowlist:false,

       timetext:'最近30天',
       timetextlist:'最近30天',


       startTimelist:'',
       endTimelist:'',
       series:'',
       xAxis:'',

    
     
        pickerOptions0: {  
        disabledDate:(time)=> {  
          // 最多只能选择3个月的

          let ayearAgo = Date.now() - (31536000000 / 4) 
          return time.getTime() > Date.now() || time.getTime() < ayearAgo 
        }
      }, 
      pickerOptions1: {  
        disabledDate :(time)=> {  
          let aa = this.startTime
          return time.getTime() > Date.now() || time.getTime() < aa 
        }  
       }, 

      }
    },
    // components: {pagination},
    mounted () {
      // let that = this;
      // that.getList();
      this.time(7)
      this.timelist(7)
      this.getIndexlist()
      this.getIndextitle()

      this.getIndexbrokenLine()
      
      

    
    },
    methods: {
     drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
                 
        let name=''
        if(this.status=='amount'){
             name='收入'
        }else if(this.status=='articleAmount'){
             name='文章收入'
        }else if(this.status=='channelAmount'){
             name='推广收入'
        }else if(this.status=='pv'){
             name='阅读数'
        }else if(this.status=='uv'){
             name='阅读用户'
        }

        myChart.setOption({
             tooltip: {
                trigger: 'axis'
             },
            xAxis: {
            	type: 'category',
                data: this.xAxis
            },
            yAxis: {
                   
            },
            series: [{
                name: name,
                type: 'line',
                data: this.series
            }]
        });
    },
      startTimeT:function(){
         this.startTime=this.startTime.getTime()
        },
      endTimeT:function(){
            this.endTime=this.endTime.getTime()
        },
        startTimelistT:function(){
            this.startTimelist=this.startTimelist.getTime()

        },
        endTimelistT:function(){
          this.endTimelist=this.endTimelist.getTime()
        },
       //时间
   
      timebox:function(){
      	  if(this.timeshow==false){
                  this.timeshow=true
      	  }else if(this.timeshow!=false){
      	  	      this.timeshow=false
      	  }
      },
       timeboxlist:function(){
          if(this.timeshowlist==false){
                  this.timeshowlist=true
          }else if(this.timeshowlist!=false){
                  this.timeshowlist=false
          }
      },
    times:function(){
    	  this.timetext='自定义'
    },
     timeslist:function(){
        this.timetextlist='自定义'
    },

      time:function(id){
           var now=new Date()  //当前日期
            var nowDay = now.getDate(); //当前日
            var nowMonth = now.getMonth(); //当前月
            var nowYear = now.getYear(); //当前年
                nowYear += (nowYear < 2000) ? 1900 : 0;
            // var newDate=now.getTime()//当前毫秒数
            if(id==1){
                 var endDate = new Date(nowYear, nowMonth, nowDay - 1);
                 var endDates = new Date(nowYear, nowMonth, nowDay);
                 this.startTime=endDate.getTime()
                  this.endTime=endDates.getTime() - 1
                  this.timetext='昨天'
            }
             if(id==2){
                var nowDayOfWeek = now.getDay(); //今天本周的第几天
                var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 7);
                var weekEndDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
                 this.startTime=weekStartDate.getTime()
                  this.endTime=weekEndDate.getTime() - 1
                  this.timetext='上周'
            }
             if(id==3){
               var startTimes = new Date(nowYear, nowMonth, 1);
                var endDate = new Date(nowYear, nowMonth, nowDay + 1);
                 this.startTime=startTimes.getTime()
                  this.endTime=endDate.getTime() - 1
                   this.timetext='本月'
            }
             if(id==4){
              var monthStartDate = new Date(nowYear, nowMonth - 1, nowDay);
                var monthEndDate = new Date(nowYear, nowMonth, nowDay);
                var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
                var startTimes=new Date(nowYear, nowMonth - 1, 1);
                var endTimes=new Date(nowYear, nowMonth - 1, days + 1);
                 this.startTime=startTimes.getTime()
                  this.endTime=endTimes.getTime() - 1
                  this.timetext='上月'
            }
             if(id==5){
                 var todayDate = new Date(nowYear, nowMonth, nowDay - 7);
                 var endDate = new Date(nowYear, nowMonth, nowDay);
                 this.startTime=todayDate.getTime()
                  this.endTime=endDate.getTime() - 1
                   this.timetext='最近7天'
            }
             if(id==6){
                 var todayDate = new Date(nowYear, nowMonth, nowDay - 15);
                  var endDate = new Date(nowYear, nowMonth, nowDay);
                 this.startTime=todayDate.getTime()
                  this.endTime=endDate.getTime() - 1
                  this.timetext='最近15天'
            }
             if(id==7){
                 var todayDate = new Date(nowYear, nowMonth, nowDay - 30);
                  var endDate = new Date(nowYear, nowMonth, nowDay);
                 this.startTime=todayDate.getTime()
                  this.endTime=endDate.getTime() - 1
                   this.timetext='最近30天'
            }
            // if(this.startTime!=''){
            //   this.startTimes=publics.stamp(this.startTime)
            //  this.endTimes=publics.stamp(this.endTime)
            // }
        },
            timelist:function(id){
           var now=new Date()  //当前日期
            var nowDay = now.getDate(); //当前日
            var nowMonth = now.getMonth(); //当前月
            var nowYear = now.getYear(); //当前年
                nowYear += (nowYear < 2000) ? 1900 : 0;
            // var newDate=now.getTime()//当前毫秒数
            if(id==1){
                 var endDate = new Date(nowYear, nowMonth, nowDay - 1);
                 var endDates = new Date(nowYear, nowMonth, nowDay);
                 this.startTimelist=endDate.getTime()
                  this.endTimelist=endDates.getTime() - 1
                  this.timetextlist='昨天'
            }
             if(id==2){
                var nowDayOfWeek = now.getDay(); //今天本周的第几天
                var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 7);
                var weekEndDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
                 this.startTimelist=weekStartDate.getTime()
                  this.endTimelist=weekEndDate.getTime() - 1
                  this.timetextlist='上周'
            }
             if(id==3){
               var startTimes = new Date(nowYear, nowMonth, 1);
                var endDate = new Date(nowYear, nowMonth, nowDay + 1);
                 this.startTimelist=startTimes.getTime()
                  this.endTimelist=endDate.getTime() - 1
                   this.timetextlist='本月'
            }
             if(id==4){
              var monthStartDate = new Date(nowYear, nowMonth - 1, nowDay);
                var monthEndDate = new Date(nowYear, nowMonth, nowDay);
                var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
                var startTimes=new Date(nowYear, nowMonth - 1, 1);
                var endTimes=new Date(nowYear, nowMonth - 1, days + 1);
                 this.startTimelist=startTimes.getTime()
                  this.endTimelist=endTimes.getTime() - 1
                  this.timetextlist='上月'
            }
             if(id==5){
                 var todayDate = new Date(nowYear, nowMonth, nowDay - 7);
                 var endDate = new Date(nowYear, nowMonth, nowDay);
                 this.startTimelist=todayDate.getTime()
                  this.endTimelist=endDate.getTime() - 1
                   this.timetextlist='最近7天'
            }
             if(id==6){
                 var todayDate = new Date(nowYear, nowMonth, nowDay - 15);
                  var endDate = new Date(nowYear, nowMonth, nowDay);
                 this.startTimelist=todayDate.getTime()
                  this.endTimelist=endDate.getTime() - 1
                  this.timetextlist='最近15天'
            }
             if(id==7){
                 var todayDate = new Date(nowYear, nowMonth, nowDay - 30);
                  var endDate = new Date(nowYear, nowMonth, nowDay);
                 this.startTimelist=todayDate.getTime()
                  this.endTimelist=endDate.getTime() - 1
                   this.timetextlist='最近30天'
            }
            // if(this.startTime!=''){
            //   this.startTimes=publics.stamp(this.startTime)
            //  this.endTimes=publics.stamp(this.endTime)
            // }
        },

      //分页
      handleSizeChange(val){
          this.pages.size=val
          this.getIndexlist()
      },
      handleCurrentChange(val){
          this.pages.no=val
          this.getIndexlist()
      },
      // 
   
      //获得列表
      getIndexlist (type) {
        let that = this;
        if(type==true){
           that.currentPage=1
           that.pages.no=1
        }
        commonService.getIndexlist({pageNo: that.pages.no, pageSize:that.pages.size,type:3,startTime:that.startTimelist,endTime:that.endTimelist}).then(function (res) { 
                  if(res.data.code==200){
            
                          that.tableData=res.data.datas.records
                          that.inde=res.data.datas.total
                          that.timeshowlist=false
                          that.empty="暂无数据"
                  }
                  
        });
      },
       //获得总额
      getIndextitle () {
        let that = this;
        commonService.getIndextitle().then(function (res) {
                  if(res.data.code==200){
                    // console.log(res)
                          that.totaldata=res.data.datas
                  }
                  
        });
      },
       //获得概况图
      getIndexbrokenLine () {
        let that = this;
        // console.log(that.startTime)
        commonService.getIndexbrokenLine({dimension:that.status,type:3,startTime:that.startTime,endTime:that.endTime}).then(function (res) {
               // console.log(res)
                  if(res.data.code==200){
                          that.series=res.data.datas.series
                          that.xAxis=res.data.datas.xAxis
                          for(let i=0;i<that.series.length;i++){
                              that.series[i]=(that.series[i] / 100).toFixed(2)
                          }
                          that.drawLine() 
                          that.timeshow=false
                  }
                  
        });
      },
 
       
       
     
  
    },
   
  }
</script>
<style lang="less">
  .survey{
  	padding: 20px;
  	.v_survey{
  		background: #fff;
  		padding: 20px 0;
        // border: 1px solid #dcdfe6;
        // -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        //  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
         margin-bottom: 20px;
  		.v_surveytop{
  			line-height: 40px;
  			color: #333;
  			margin-left: 20px;
  		} 
  		.v_surveybox{
  			div{
  				border:1px solid #dcdfe6;
  				border-radius: 6px;
  				float: left;
  				width: 140px;
  				height: 40px;
  				padding: 10px 0;
  				margin-left: 20px;
  				p{
  					line-height: 20px;
  					text-align: center;

  				}

  			}
  		}
  	}
  	.v_myChart{
  		  padding: 0 20px;
  		  .v_myCharttop{
  		  	 .v_myCharttopl{
  		  	 	 float: left;
  		  	 	 line-height: 28px;
                 color: #333;
  		  	 }
  		  	 .v_myCharttopr{
  		  	 	float: right;
  		  	 	 .p_surface_title_r{
                       float: right;
    // margin-top: 8px;
                     margin-left: 10px;
                   }
  .p_surface_title_r_div{
    width: 120px;
    height: 26px;
    border:1px solid #f29700;
    border-radius: 3px;
   
    position: relative;
  }
  .p_surface_title_r_div_text{
      text-align: center;
  }
  .p_surface_title_r_div p{
    line-height: 26px;
    font-size: 14px;
    color: #f29700;
    cursor: pointer; 

  }

  .p_surface_title_r_div_fixed{
    display: block;
    position:absolute;
    top: 36px;
    right: 0px;
    width: 460px;
    z-index: 999;
    border:1px solid #f29700;
    border-radius:4px;
    background: #fff;
    padding: 0px 20px;

  }
  .p_surface_title_r_div_fixed li{
    float: left;
    width: 120px;
    margin-left: 30px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
  }
  .p_surface_title_r_div_fixed .v_li{
          color: #f29700;
  }
  .p_surface_title_r_div_operation{
      border-top: 1px solid #e5e5e5;
      padding: 14px 0;
  }
  .p_surface_title_r_div_cancel{
       float: right;
      width: 60px;
      height: 32px;
      border:1px solid #e5e5e5;
      text-align: center;
      margin-right: 20px;
      line-height: 32px;
      cursor: pointer;
  }
  .p_surface_title_r_div_determine{
      float: right;
      width: 60px;
      height: 32px;
      background: #f29700;
      color: #fff;
      border:1px solid #f29700; 
      border-radius: 3px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
  }
  		  	 }
  		  }
  	}
  	.article_div{
     	background: #fff;
        border: 1px solid #dcdfe6;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
         box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
         .top{
         	background:#f5f7fa;
         	height: 40px;
         	// border-top: 1px solid #dcdfe6;
         	border-bottom: 1px solid #e4e7ed;
         	.v_div{
         		float: left;
         		height: 40px;
         		padding: 0 20px;
         		line-height: 40px;
         		color: #909399;
         		font-size: 14px;
         		
         	}
         	.v_div:hover{
         		color: #F29700;

         	}
         	.router-link-active{
         		div{

         		border-left: 1px solid #e4e7ed;
         		border-right: 1px solid #e4e7ed;
         		border-top: 1px solid #e4e7ed;
                border-bottom: 1px solid #fff; 
         		color: #F29700;
         		background: #fff;
         	}
         	}
         	
         	a:first-child .v_div{

         		border-left: none;
         	}

         }
         .v_box{
         	// height: 200px;

    .income{
       padding: 15px;
      .searchIpt {
        width: 250px;
      }
      .v_table{
      	.v_tablel{
      		float: left;
      		line-height: 28px;
      		color: #333;
      	}
      	.opr{
      		float: right;
        margin-bottom: 20px;
           .p_surface_title_r{
                       float: right;
    // margin-top: 8px;
                     margin-left: 10px;
                   }
  .p_surface_title_r_div{
    width: 120px;
    height: 26px;
    border:1px solid #f29700;
    border-radius: 3px;
   
    position: relative;
  }
  .p_surface_title_r_div_text{
      text-align: center;
  }
  .p_surface_title_r_div p{
    line-height: 26px;
    font-size: 14px;
    color: #f29700;
    cursor: pointer; 

  }

  .p_surface_title_r_div_fixed{
    display: block;
    position:absolute;
    top: 36px;
    right: 0px;
    width: 460px;
    z-index: 999;
    border:1px solid #f29700;
    border-radius:4px;
    background: #fff;
    padding: 0px 20px;

  }
  .p_surface_title_r_div_fixed li{
    float: left;
    width: 120px;
    margin-left: 30px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
  }
  .p_surface_title_r_div_fixed .v_li{
          color: #f29700;
  }
  .p_surface_title_r_div_operation{
      border-top: 1px solid #e5e5e5;
      padding: 14px 0;
  }
  .p_surface_title_r_div_cancel{
       float: right;
      width: 60px;
      height: 32px;
      border:1px solid #e5e5e5;
      text-align: center;
      margin-right: 20px;
      line-height: 32px;
      cursor: pointer;
  }
  .p_surface_title_r_div_determine{
      float: right;
      width: 60px;
      height: 32px;
      background: #f29700;
      color: #fff;
      border:1px solid #f29700; 
      border-radius: 3px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
  }
      }
      }
      
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }


      
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
           }
}
  }
</style>